<script lang="jsx" setup>
import { nextTick, ref } from 'vue';
import Modal from '@/components/common/modal.vue';
import Table from '@/components/common/table.vue';
import CommonSearch from '@/components/common/common-search.vue';

const visible = ref(false);

const emit = defineEmits(['select']);

const commonSearchRef = ref(null);
const searchParams = ref({
  itemName: null,
  meshCount: null
});
const searchFormList = [
  {
    type: 'input',
    key: 'itemName',
    label: '项目名称',
    placeholder: '请输入项目名称',
    span: 8
  },
  {
    type: 'input',
    key: 'meshCount',
    label: '网目',
    placeholder: '请输入网目',
    span: 8
  }
];

const tableRef = ref(null);
const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    fixed: 'left',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },

  {
    key: 'itemName',
    dataIndex: 'itemName',
    title: '项目名称',
    align: 'center',
    fixed: 'left',
    checked: true,
    ellipsis: true
  },
  {
    key: 'deptName',
    dataIndex: 'deptName',
    title: '使用部门',
    align: 'center',
    width: 100,
    checked: true,
    ellipsis: true
  },
  {
    key: 'meshCount',
    dataIndex: 'meshCount',
    title: '网目',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'totalLive',
    dataIndex: 'totalLive',
    title: '使用寿命',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'totalWc',
    dataIndex: 'totalWc',
    title: '翻洗次数',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'newLower',
    dataIndex: 'newLower',
    title: '新网张力下限',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'newUpper',
    dataIndex: 'newUpper',
    title: '新网张力上限',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'oldUpper',
    dataIndex: 'oldUpper',
    title: '旧网张力上限',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'oldLower',
    dataIndex: 'oldLower',
    title: '旧网张力下限',
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '创建人',
    width: 90,
    align: 'center',
    checked: true,
    ellipsis: true
  }
];

function search() {
  tableRef.value.getData(1);
}

function reset() {
  nextTick(() => {
    searchParams.value.itemName = null;
    searchParams.value.meshCount = null;
    tableRef.value.getData(1);
  });
}

function tableRowClick(row) {
  emit('select', row);
  visible.value = false;
}

function handleOpen(itemName) {
  searchParams.value.itemName = itemName;
  visible.value = true;
}

defineExpose({
  handleOpen
});
</script>

<template>
  <Modal
    v-model:visible="visible"
    title="网板类型列表"
    height="80vh"
    width="1200px"
    :destroy-on-close="false"
    :show-confirm-btn="false"
    cancel-btn-text="关闭"
  >
    <div class="h-full min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
      <CommonSearch
        ref="commonSearchRef"
        v-model:searchParams="searchParams"
        :form-list="searchFormList"
        :is-search="true"
        @search="search"
        @reset="reset"
      ></CommonSearch>
      <Table
        ref="tableRef"
        v-model:searchParams="searchParams"
        :column="column"
        row-key="id"
        :show-row-selection="false"
        auto-generate-uuid
        :scroll="{ y: 'auto' }"
        is-init-get-data
        class="h-full"
        url="/qms/scrscreen/scrscreenType/pageList"
        @table-row-click="tableRowClick"
      ></Table>
    </div>
  </Modal>
</template>

<style lang="scss" scoped></style>
